<template>
  <div class="main">
    <div class="top-main">
      <dz-nav :is-back="true" :back-url="'/my'">
        <template #center>
          <b v-color><qq>HelpCenter</qq></b>
        </template>
      </dz-nav>
      <div class="avatar">
        <img src="@/assets/images/avatar.png" alt="" class="img-avatar">
      </div>
    </div>
    <div class="lists">
      <div class="item" v-for="(item, index) in lists" :key="index"
        @click="handleLink(item.customerServiceLink)"
      >
        <span>{{ item.name }}</span>
        <van-icon name="down" color="#242B35" style="transform: rotate(-90deg)" />
      </div>
    </div>
  </div>
</template>

<script>
import { getCustomerServiceLinkV2 } from '@/api/apiFox'
export default {
  data(){
    return{
      lists: []
    }
  },
  methods: {
    getLists() {
      getCustomerServiceLinkV2().then(res => {
        this.lists = res.data
      }).catch(err => {})
    },
    handleLink(link) {
      window.open(link, '_target')
    }
  },
  created() {
    this.getLists()
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  min-height: 100vh;
  background: linear-gradient( 180deg, #FFFADF 0%, #F5BEBE 100%);
  .top-main{
    width: 100%;
    .avatar{
      padding-top: 10px;
      text-align: center;
      .img-avatar{
        width: 180px;
        height: 180px;
      }
    }
  }
  .lists{
    padding: 0 15px;
    margin-top: 32px;
    .item{
      background: #FFFFFF;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 15px;
      font-size: 16px;
      color: #242B35;
      margin-top: 10px;
    }
  }
}
</style>